<template>
  <div>
    <div>
      <el-card class='box-card'>
        <h1>个人个性简历</h1>
        <el-button type='primary' icon='el-icon-upload' @click='uploadFile' v-if='!this.pdfUrl'>上传个性简历</el-button>
        <div>
          <el-image :src="require('@/assets/pdf.png')" v-if='this.pdfUrl'></el-image>
          <div>
            <div class='bottom clearfix'>
              <el-link :href="this.pdfUrl" target="_blank" type="primary" :underline=false v-if='this.pdfUrl'>预览</el-link>
              <el-link style='padding-left: 1em;' target="_blank" type="primary" :underline=false v-if='this.pdfUrl' @click="deletePdfFile()">删除</el-link>
            </div>
          </div>
        </div>
        <el-dialog :title='dialogTitle' :visible.sync='dialogVisibleFile' style='height: 40%'>
          <div class='edit-con'>
            <div class='edit-item'>
              <div class='item-name'>文件上传:</div>
              <el-upload
                class='upload-demo'
                action='http://zp.eapjfz.com/recruit/wx/uploadFile'
                :on-change='handlePreview'
                :on-remove='handleRemove'
                :before-remove='beforeRemove'
                :before-upload='beforeAvatarUpload1'
                multiple
                :limit='2'
                :on-exceed='handleExceed'
                :file-list='fileList'
              >
                <el-button size='small' type='primary' class='upload-btn'>上传文件</el-button>
              </el-upload>
            </div>
          </div>
          <div class='edit-bottom'>
            <el-button @click='dialogVisibleFile = false' class='edit-btn-cancel'>取消</el-button>
            <el-button @click='makeSureUpdate()' class='edit-btn-make'>确定</el-button>
          </div>
        </el-dialog>
        <h1>个人基本信息</h1>
        <el-form :model='ruleForm' :rules='rules' ref='ruleForm' label-width='100px' class='demo-ruleForm'>
          <el-input type='hidden' v-model='ruleForm.RID'></el-input>
          <el-row>
            <el-col :span='8'>
              <el-form-item label='姓名' prop='NAME'>
                <el-input v-model='ruleForm.NAME' placeholder='请输入姓名'></el-input>
              </el-form-item>

              <el-form-item label='出生年月' required>
                <el-col :span='11'>
                  <el-form-item prop='BIRTH'>
                    <el-date-picker
                      type='date'
                      value-format='yyyy-MM-dd'
                      placeholder='选择日期'
                      v-model='ruleForm.BIRTH'
                      style='width: 218%;'>
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>

              <el-form-item label='电子邮箱' prop='EMAIL'>
                <el-input v-model='ruleForm.EMAIL' placeholder='请输入电子邮箱'></el-input>
              </el-form-item>

              <el-form-item label='学历' prop='EDUCATION'>
                <el-select v-model='ruleForm.EDUCATION' placeholder='请选择学历' style='width: 100%;'>
                  <el-option label='初中' value='1'></el-option>
                  <el-option label='高中' value='2'></el-option>
                  <el-option label='中专' value='3'></el-option>
                  <el-option label='大专' value='4'></el-option>
                  <el-option label='本科' value='5'></el-option>
                  <el-option label='研究生' value='6'></el-option>
                  <el-option label='其他' value='7'></el-option>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span='8'>
              <el-form-item label='性别' prop='SEX'>
                <el-radio-group v-model='ruleForm.SEX'>
                  <el-radio :label='2'>女</el-radio>
                  <el-radio :label='1'>男</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label='电话' prop='PHONE'>
                <el-input v-model='ruleForm.PHONE' placeholder='请输入电话'></el-input>
              </el-form-item>

              <el-form-item label='意向工作地' prop='WORKPLACE'>
                <el-input v-model='ruleForm.WORKPLACE' placeholder='请输入意向工作地'></el-input>
              </el-form-item>

              <el-form-item label='期望薪资' prop='WAGES'>
                <el-select v-model='ruleForm.WAGES' placeholder='请选择期望薪资' style='width: 100%;'>
                  <el-option label='3000以下' value='3000以下'></el-option>
                  <el-option label='3000-5000' value='3000-5000'></el-option>
                  <el-option label='5000-7000' value='5000-7000'></el-option>
                  <el-option label='7000-9000' value='7000-9000'></el-option>
                  <el-option label='9000以上' value='9000以上'></el-option>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span='8'>
              <div style='text-align: center;'>
                <el-upload
                  class='avatar-uploader'
                  action='http://zp.eapjfz.com/recruit/wx/uploadFile'
                  :show-file-list='false'
                  :on-success='handleAvatarSuccess'
                  :before-upload='beforeAvatarUpload'>
                  <img v-if='ruleForm.HEADIMG' :src='ruleForm.HEADIMG' class='avatar'>
                  <i v-else class='el-icon-plus avatar-uploader-icon'></i>
                </el-upload>
                <p style='width: 100%; height: 1em;'>大头贴</p>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter='20'>
            <el-col :span='24'>
              <el-form-item label='现居住地' prop='WORKYEARS'>
                <el-input v-model='ruleForm.WORKYEARS' placeholder='请填写详细的现居住地址'></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <globalTitle
            @getExperience='getMsgFormSon'
            :WORKEXPERIENCELIST='this.ruleForm.WORKEXPERIENCELIST'
            :EDUCATIONEXPERIENCELIST='this.ruleForm.EDUCATIONEXPERIENCELIST'
            :PROJECTEXPERIENCELIST='this.ruleForm.PROJECTEXPERIENCELIST'
            :PROFESSIONALSKILLSLIST='this.ruleForm.PROFESSIONALSKILLSLIST'
          />

          <el-form-item>
            <el-button type='primary' @click='submitForm'>{{ this.buttonType }}</el-button>
            <el-button @click='dialogVisible = true'>重置</el-button>
            <el-dialog
              title='提示'
              :visible.sync='dialogVisible'
              width='30%'
              :before-close='handleClose'>
              <span>将会清空简历中的所有内容，确定要重置吗？</span>
              <span slot='footer' class='dialog-footer'>
                        <el-button @click='dialogVisible = false'>取 消</el-button>
                        <el-button type='primary' @click='cleanResume(ruleForm.RID)'>确 定</el-button>
                        </span>
            </el-dialog>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import globalTitle from '../globalTitle.vue'
import { addMyResume, planUpFile, getResumeDetails, cleanResume, updateFileByUID, getResumePdfFile, deletePdfFile } from '@/api/api'
import pdf from 'vue-pdf'

export default {
  components: { globalTitle, pdf },
  name: 'myResume',
  data() {

    //校验手机号
    let validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('手机号不能为空！'))
      }
      //使用正则表达式进行验证手机号码
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号不正确！'))
      }
    }

    //检验邮箱
    var checkEmail = (rule, value, cb) => {
      //验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        //合法的邮箱
        return cb()
      }
      //邮箱不合法
      cb(new Error('请输入合法的邮箱！'))
    }

    return {
      pdfPreviewDialog: false,
      pdfUrl: '',
      src: '',
      planFileUrl: '',
      planFile: '',
      fileId: '',
      fileList: [],
      dialogTitle: '个性简历上传',
      dialogVisibleFile: false,
      dialogVisible: false,
      isNeedAudit: false,
      buttonType: '立即创建',
      ruleForm: {
        RID: '',
        NAME: '',
        BIRTH: '',
        EMAIL: '',
        EDUCATION: '',
        SEX: '',
        PHONE: '',
        WORKPLACE: '',
        WAGES: '',
        WORKYEARS: '',
        HEADIMG: '',
        WORKEXPERIENCELIST: [],
        EDUCATIONEXPERIENCELIST: [],
        PROJECTEXPERIENCELIST: [],
        PROFESSIONALSKILLSLIST: []
      },
      rules: {
        NAME: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { message: '姓名不能为空', trigger: 'blur' }
        ],
        BIRTH: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ],
        EMAIL: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        EDUCATION: [
          { required: true, message: '学历不能为空', trigger: 'change' }
        ],
        SEX: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        PHONE: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        WORKPLACE: [
          { required: true, message: '工作意向不能为空', trigger: 'blur' }
        ],
        WAGES: [
          { required: true, message: '期望薪资不能为空', trigger: 'change' }
        ],
        WORKYEARS: [
          { required: true, message: '现居住地址不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // this.getResumeDetails()
  },
  mounted() {
    this.getResumeDetails()
    this.getResumePdfFile()
  },

  methods: {

    //提交用户个人简历数据
    submitForm() {
      const data = {
        RID: this.ruleForm.RID,
        NAME: this.ruleForm.NAME,
        BIRTH: this.ruleForm.BIRTH,
        EMAIL: this.ruleForm.EMAIL,
        EDUCATION: this.ruleForm.EDUCATION,
        SEX: this.ruleForm.SEX,
        PHONE: this.ruleForm.PHONE,
        WORKPLACE: this.ruleForm.WORKPLACE,
        WAGES: this.ruleForm.WAGES,
        WORKYEARS: this.ruleForm.WORKYEARS,
        HEADIMG: this.ruleForm.HEADIMG,
        WORKEXPERIENCELIST: this.ruleForm.WORKEXPERIENCELIST,
        EDUCATIONEXPERIENCELIST: this.ruleForm.EDUCATIONEXPERIENCELIST,
        PROJECTEXPERIENCELIST: this.ruleForm.PROJECTEXPERIENCELIST,
        PROFESSIONALSKILLSLIST: this.ruleForm.PROFESSIONALSKILLSLIST
      }
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('触发回调')


        } else {
          return false
        }
      })

      addMyResume(data).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message.success('提交成功')
        }
      })
    },
    // 获取pdf文件
    getResumePdfFile() {
      getResumePdfFile().then(res => {
        this.pdfUrl = res.data.RESUME_URL
        console.log('pdf文件',res)
      })
    },
    //获取用户个人简历中的信息
    getResumeDetails() {
      const data = {
        current: 1,
        newsCategoryId: 45,
        size: 3
      }
      getResumeDetails(data)
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            this.ruleForm.RID = res.data.ID
            this.ruleForm.NAME = res.data.NAME
            this.ruleForm.SEX = res.data.SEX
            this.ruleForm.BIRTH = res.data.BIRTH
            this.ruleForm.PHONE = res.data.PHONE
            this.ruleForm.EMAIL = res.data.EMAIL
            this.ruleForm.WORKPLACE = res.data.WORKPLACE
            this.ruleForm.EDUCATION = res.data.EDUCATION
            this.ruleForm.WAGES = res.data.WAGES
            this.ruleForm.WORKYEARS = res.data.ADDRESS
            this.ruleForm.HEADIMG = res.data.HEADIMG
            this.ruleForm.WORKEXPERIENCELIST = res.data.workRecordList
            this.ruleForm.EDUCATIONEXPERIENCELIST = res.data.eduRecordList
            this.ruleForm.PROJECTEXPERIENCELIST = res.data.projectExperienceList
            this.ruleForm.PROFESSIONALSKILLSLIST = res.data.professionalSkillsList
            if (res.data.NAME) {
              this.buttonType = '保存修改'
            } else {
              this.buttonType = '立即创建'
            }
            console.log('myresume', res.data.workRecordList)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 点击重置按钮，重置登录表单
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },

    handleAvatarSuccess(res, file) {
      var blob = new Blob([res], { type: 'application/octet-stream' })
      let url = window.URL.createObjectURL(blob)
      console.log('url', url)

      this.ruleForm.HEADIMG = URL.createObjectURL(file.raw)
      console.log('这是文件上传', res.assign)
      console.log('打印文件', file.response)
      console.log('打印文件=====', URL.createObjectURL(file.raw))
      console.log('this.ruleForm.HEADIMG', this.ruleForm.HEADIMG)
    },

    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isLt2M
    },

    getMsgFormSon(type, param) {
      if (type === 'workExperienceList') {
        this.ruleForm.WORKEXPERIENCELIST = param
      }
      if (type === 'education_experience_form') {
        this.ruleForm.EDUCATIONEXPERIENCELIST = param
      }
      if (type === 'project_experience_form') {
        this.ruleForm.PROJECTEXPERIENCELIST = param
      }
      if (type === 'professional_skills_form') {
        this.ruleForm.PROFESSIONALSKILLSLIST = param
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    cleanResume(RID) {
      this.dialogVisible = false
      //获取用户个人简历中的信息
      const data = {
        RID: RID
      }
      cleanResume(data)
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            this.getResumeDetails()
          }
        })
    },
    beforeAvatarUpload1(file) {
      // 文件类型判断
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'pdf'
      if (!extension) {
        this.$message({
          message: '上传文件只能是 pdf格式!',
          type: 'warning'
        })
        this.dialogVisibleFile = false
        this.fileList = []
      } else {
        // 参数拼接
        let fileData = new FormData()
        fileData.append('file', file)
        // 调用接口
        planUpFile(fileData).then((res) => {
          this.planFileUrl = res
        })
      }
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    // 文件发生改变时的钩子
    handlePreview(obj) {
      this.planFile = obj.raw
    },
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    // 删除文件之前的钩子
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    makeSureUpdate() {
      console.log('file', this.planFileUrl)
      const data = {
        planFileUrl: this.planFileUrl
      }
      //保存文件至数据库
      updateFileByUID(data).then((res) => {
        if (res.code == 200) {
          this.$message.success('上传文件成功')
          this.fileList = []
          this.getResumePdfFile()
          this.getResumeDetails()
          this.dialogVisibleFile = false
        } else {
          this.$message.warning('请稍后再试')
        }
      })
    },
    uploadFile() {
      this.dialogVisibleFile = true
    },
    previewFile() {
      // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
      console.log('this.pdfUrl', this.pdfUrl)
      this.src = pdf.createLoadingTask(this.pdfUrl)
      this.pdfPreviewDialog = true
    },
    deletePdfFile() {
      const data = {
        pdfUrl: this.pdfUrl
      }
      console.log('删除个性简历')
      //删除用户pdf个性文件
      deletePdfFile(data).then((res) => {
        if (res.code == 200) {
          this.getResumePdfFile()
          this.getResumeDetails()
          this.$message.success('删除成功')
        } else {
          this.$message.warning('请稍后再试')
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
h4 {
  text-align: center;
  margin-top: 0;
}

.mart10 {
  margin-top: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #ad2222;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #17212c;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #3a4c67;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: solid 2px;
  border-color: #61e7ce;
}

.avatar {
  border: solid 2px;
  border-color: #61e7ce;
  width: 178px;
  height: 178px;
  display: block;
}

.group {
  display: flex;
  //justify-content: space-between;
  justify-content: flex-start;
}

.el-row {
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #ffffff;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>
